<template>
	<view :class="type === 0 ? 'popup1 type' : 'popup1'"
		v-if="user && user.mobile && user.grade == 1 && !user.number_receive && isShow && !show && isShowFirst">
		<view class="img">
		</view>
		<p class="popup-p">您可领取三次免费接单机会</p>
		<button @tap="onReceive" style="width: 110rpx !important;background-color: #01C060;">点击领取</button>
		<view class="cancel" @click="notShow"></view>
	</view>
	<view :class="type === 0 ? 'popup2 type' : (isFlashing ? 'popup2 flash is-flashing' : 'popup2 flash')"
		v-else-if="user && user.mobile && user.grade == 2  && !user.settledInfoStatus && isShow">
		<view class="img">
		</view>
		<p class="popup-p">会员企业需补充资料，补充后即可正常使用</p>
		<button @tap="goSettledInfo" style="width: 110rpx !important;background-color: #01C060;">点击补充</button>
		<view class="cancel" @click="notShow"></view>
	</view>
</template>

<script>
	import model from '@/component/model';
	import http from '@/utils/http';
	export default {
		components: {
			model
		},
		props: {
			isShowFirst:{
				type: Boolean,
				default: true
			},
			show:{
				type: Boolean,
				default: false
			},
			blink: {
				type: Boolean,
				default: false
			},
			type: Number,
			user: {
				type: Object,
				default: null
			}
		},
		watch: {
			blink(val) {
				if (val) {
					this.startFlashing()
				}
			}
		},
		data() {
			return {
				isShow: true,
				isFlashing: false,
			}
		},
		methods: {
			goSettledInfo() {
				uni.navigateTo({
					url: '/pages/Factoryinformation/Factoryinformation'
				});
			},
			startFlashing() {
				this.isFlashing = true;
				setTimeout(() => {
					this.isFlashing = false;
				}, 1000); // 闪烁一次的时间
			},
			onReceive() {
				const data = {}
				let first = uni.getStorageSync("firstPopup")
				if (!first) {
					uni.setStorageSync('firstPopup', true)
				}
				let popupTime = uni.getStorageSync('popupTime');
				if (popupTime) {
					let nowDate = new Date().setHours(0, 0, 0, 0)
					if (nowDate > popupTime) {
						let that = this
						uni.requestSubscribeMessage({
							tmplIds: ['Ps_TGNHTlkFPLHybskEltaWoAvSZ1GhsoXfiJBGwTjA'],
							success(res) {
								if (res.Ps_TGNHTlkFPLHybskEltaWoAvSZ1GhsoXfiJBGwTjA == 'accept') {
									http.request('demand/empower')
									uni.setStorageSync('popupTime', new Date().getTime())
								}
								http.request('user/receive', data)
									.then((res) => {
										that.$emit('change',true)
									})
									.catch((res) => {
										uni.showToast({
											title: res.message,
											icon: 'none'
										});
									});
							}
						})
					} else {
						let that = this
						http.request('user/receive', data)
							.then((res) => {
										that.$emit('change',true)
							})
							.catch((res) => {
								uni.showToast({
									title: res.message,
									icon: 'none'
								});
							});
					}
				} else {
					let that = this
					uni.requestSubscribeMessage({
						tmplIds: ['Ps_TGNHTlkFPLHybskEltaWoAvSZ1GhsoXfiJBGwTjA'],
						success(res) {
							if (res.Ps_TGNHTlkFPLHybskEltaWoAvSZ1GhsoXfiJBGwTjA == 'accept') {
								http.request('demand/empower')
								uni.setStorageSync('popupTime', new Date().getTime())
							}
							http.request('user/receive', data)
								.then((res) => {
									that.$emit('change',true)
								})
								.catch((res) => {
									uni.showToast({
										title: res.message,
										icon: 'none'
									});
								});
						}
					})
				}
			},
			notShow() {
				this.isShow = false;
			}
		}
	}
</script>

<style>
	.popup1 {
		display: flex;

		height: 30px;
		opacity: 0.95;
		align-items: center;
		/* 		justify-content: space-between; */
		background: rgba(255, 249, 223, 1);
		border-radius: 16px;
		padding: 0 12rpx 0 25rpx;
		box-sizing: border-box;
	}

	.type {
		width: 710rpx;
		margin: 24rpx 30rpx 0;
	}

	.popup2 {
		/* width: 100%; */
		display: flex;
		height: 30px;
		opacity: 0.95;
		align-items: center;
		/* 		justify-content: space-between; */
		background: rgba(255, 249, 223, 1);
		border-radius: 16px;
		padding: 0 12rpx 0 25rpx;
		box-sizing: border-box;
	}

	.popup1 button {
		width: 96rpx !important;
		height: 40rpx;
		background-color: transparent !important;
		border-bottom: 1px solid #01c060;
		border-radius: 0;
		padding: 0;
		margin: 0 0 0 6px !important;
		font-size: 24rpx;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		text-align: center;
		color: #01c060;
		line-height: 40rpx;
	}

	.popup2 button {
		width: 96rpx !important;
		height: 40rpx;
		background-color: transparent !important;
		border-bottom: 1px solid rgba(15, 18, 198, 1);
		border-radius: 0;
		padding: 0;
		margin: 0 !important;
		font-size: 24rpx;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		text-align: center;
		color: rgba(15, 18, 198, 1);
		line-height: 40rpx;
	}

	.popup2 .img {
		width: 13px;
		height: 13px;
		background-image: url("https://wx.xtwaixie.com/img/warning.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.popup1 .img {
		width: 13px;
		height: 13px;
		background-image: url("../static/icon/right.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.popup-p {
		font-size: 12px;
		font-family: PingFangSC, PingFangSC-Regular;
		padding: 0;
		margin-left: 6px;

	}

	.cancel {
		text-align: end !importants;
		width: 12px;
		height: 12px;
		background-color: rgba(190, 183, 172, 1);
		border-radius: 50%;
		background-image: url("https://wx.xtwaixie.com/img/close.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		margin-right: 5px;
		margin-left: auto;
	}


	/* 闪烁动画 */
	.blink-box {
		position: relative;
		animation: blink-animation 1s infinite;
		animation-delay: 1s;
		animation-iteration-count: 1;
	}

	@keyframes blink-animation {

		0%,
		50%,
		100% {
			opacity: 1;
		}

		25%,
		75% {
			opacity: 0;
		}
	}

	@keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.flash {
		animation: blink 0.5s infinite;
		animation-play-state: paused;
		/* 开始时闪烁效果暂停 */
		opacity: 1;
		transition: opacity 0.5s;
	}

	.flash.is-flashing {
		animation-play-state: running;
		/* 点击后开始闪烁 */
	}
</style>